// // 创建一个Map用于存储回调函数，键为响应式对象，值为该对象属性到回调数组的映射
// const callbacks = new Map();

// // 创建一个Map用于存储响应式对象及其对应的Proxy代理对象
// let reactivties = new Map();

// // 创建一个数组用于记录访问过的响应式属性和对象
// let usedReactivties = [];

// // 定义一个原始对象
// const target = {
//     a: { c: 3 },
//     b: 2
// };

// // 定义一个函数，将对象转换为响应式对象
// const reactive = function(target) {
//     // 如果该对象已经被转换为响应式对象，则直接返回其代理对象
//     if (reactivties.has(target))
//         return reactivties.get(target);

//     // 创建一个Proxy代理对象，拦截对象属性的读取和设置
//     let proxy = new Proxy(target, {
//         set(targetObj, prop, val) {
//             // 设置属性值
//             targetObj[prop] = val;
//             // 如果存在针对该属性的回调函数，则执行它们
//             if (callbacks.get(targetObj) && callbacks.get(targetObj).get(prop))
//                 for (let callback of callbacks.get(targetObj).get(prop)) {
//                     callback();
//                 }
//             return targetObj[prop];
//         },
//         get(targetObj, prop) {
//             // 记录访问的响应式对象和属性
//             usedReactivties.push([targetObj, prop]);
//             // 如果属性值是对象，则递归地将其转换为响应式对象
//             if (typeof targetObj[prop] === 'object')
//                 return reactive(targetObj[prop]);
//             // 返回属性值
//             return targetObj[prop];
//         }
//     });

//     // 将原始对象和对应的Proxy代理对象存储在Map中
//     reactivties.set(target, proxy);
//     // 返回Proxy代理对象
//     return proxy;
// };

// // 创建一个响应式对象的代理
// const proxy = reactive(target);

// // 定义一个函数，用于注册和触发依赖的回调函数
// const effaect = function(callback) {
//     // 清空已访问的响应式属性记录
//     usedReactivties = [];
//     // 执行回调函数，并在此过程中记录访问的响应式属性
//     callback();
//     // 遍历访问过的响应式属性，注册回调函数
//     for (let reactivity of usedReactivties) {
//         let targetObj = reactivity[0];
//         let prop = reactivity[1];
//         // 如果该对象的回调映射不存在，则创建
//         if (!callbacks.has(targetObj)) {
//             callbacks.set(targetObj, new Map());
//         }
//         // 如果该属性的回调数组不存在，则创建
//         if (!callbacks.get(targetObj).has(prop)) {
//             callbacks.get(targetObj).set(prop, []);
//         }
//         // 将回调函数添加到对应属性的回调数组中
//         callbacks.get(targetObj).get(prop).push(callback);
//     }
// };

// effaect(() => {
//     console.log(proxy.a);
// });

// // 使用effaect函数注册一个回调函数，该回调函数会访问proxy.b属性
// effaect(() => {
//     // 这里可能只是示例，实际使用中可能不会这样直接操作DOM
//     document.querySelector("#...").innerText = proxy.b;
// });

// // 为某个DOM元素添加点击事件监听器，当点击时修改proxy.b的值，这会触发依赖proxy.b的回调函数
// document.querySelector("#...").addEventListener('click', () => proxy.b += 1);

/**
 * 将对象转换为响应式对象，并返回其代理对象
 *
 * @param target 要转换的原始对象
 * @param callback 回调函数，当对象的属性值发生变化时触发
 * @returns 转换后的响应式对象的代理对象
 */
function setReactiveProxy(target,callback) {
    // 创建一个Map用于存储回调函数，键为响应式对象，值为该对象属性到回调数组的映射
    const callbacks = new Map();

    // 创建一个Map用于存储响应式对象及其对应的Proxy代理对象
    let reactivties = new Map();

    // 创建一个数组用于记录访问过的响应式属性和对象
    let usedReactivties = [];

    // 定义一个函数，将对象转换为响应式对象
    const reactive = function(target) {
        // 如果该对象已经被转换为响应式对象，则直接返回其代理对象
        if (reactivties.has(target))
            return reactivties.get(target);

        // 创建一个Proxy代理对象，拦截对象属性的读取和设置
        let proxy = new Proxy(target, {
            set(targetObj, prop, val) {
                // 设置属性值
                targetObj[prop] = val;
                // 如果存在针对该属性的回调函数，则执行它们
                if (callbacks.get(targetObj) && callbacks.get(targetObj).get(prop))
                    for (let callback of callbacks.get(targetObj).get(prop)) {
                        callback(proxy);
                    }
                return targetObj[prop];
            },
            get(targetObj, prop) {
                // 记录访问的响应式对象和属性
                usedReactivties.push([targetObj, prop]);
                // 如果属性值是对象，则递归地将其转换为响应式对象
                if (typeof targetObj[prop] === 'object')
                    return reactive(targetObj[prop]);
                // 返回属性值
                return targetObj[prop];
            }
        });

        // 将原始对象和对应的Proxy代理对象存储在Map中
        reactivties.set(target, proxy);
        // 返回Proxy代理对象
        return proxy;
    };

    // 创建一个响应式对象的代理
    const proxy = reactive(target);

    // 定义一个函数，用于注册和触发依赖的回调函数
    const effaect = function(callback) {
        // 清空已访问的响应式属性记录
        usedReactivties = [];
        // 执行回调函数，并在此过程中记录访问的响应式属性
        callback(proxy);
        // 遍历访问过的响应式属性，注册回调函数
        for (let reactivity of usedReactivties) {
            let targetObj = reactivity[0];
            let prop = reactivity[1];
            // 如果该对象的回调映射不存在，则创建
            if (!callbacks.has(targetObj)) {
                callbacks.set(targetObj, new Map());
            }
            // 如果该属性的回调数组不存在，则创建
            if (!callbacks.get(targetObj).has(prop)) {
                callbacks.get(targetObj).set(prop, []);
            }
            // 将回调函数添加到对应属性的回调数组中
            callbacks.get(targetObj).get(prop).push(callback);
        }
    };
    effaect(callback)
    return proxy;
}

//let myproxy = setReactiveProxy({h:22},(proxy)=>console.log(proxy.h))
//let myproxy = setReactiveProxy({h:22},(proxy)=>document.querySelector("#container > div:nth-child(3) > div.TabContent > div > div > div.gk_col_r > div.zwnrs > div.zwbox2.beij.fl > div.bt > span").innerText = proxy.h)
//document.querySelector("#container > div:nth-child(3) > div.TabContent > div > div > div.gk_col_r > div.zwnrs > div.zwbox2.beij.fl > div.bt > span").addEventListener('click', ()=>myproxy.h += 1);

//myproxy.h = 55

//要绑定的对象
const target = {prop:1}
//注册依赖 proxy=>proxy.prop 是回调方法
const reactiveRroxy = setReactiveProxy(target,proxy=>proxy.prop)
//触发依赖
myproxy.prop = 55